<template>
    <div>
        <el-button type="primary" @click="openDialog">物资修改</el-button>
        <el-dialog :visible.sync="dialogVisible" title="物资修改" @close="closeDialog">
            <el-form :model="form" ref="form" :rules="rules" label-width="120px">
                <el-form-item label="物资编号" prop="id">
                    <el-input v-model="form.id" @change="fetchInventory"></el-input>
                </el-form-item>
                <el-form-item label="设备名称" prop="name">
                    <el-input v-model="form.name" :disabled="isFetching"></el-input>
                </el-form-item>
                <el-form-item label="数量" prop="quantity">
                    <el-input v-model="form.quantity" type="number" :disabled="isFetching"></el-input>
                </el-form-item>
                <el-form-item label="设备编码" prop="deviceCode">
                    <el-input v-model="form.deviceCode" :disabled="isFetching"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="closeDialog" :disabled="isFetching">取消</el-button>
                <el-button type="primary" @click="onSubmit" :disabled="isFetching">确定</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: {
        visible: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            dialogVisible: this.visible,
            form: {
                id: '',
                name: '',
                quantity: 0,
                deviceCode: ''
            },
            isFetching: false,
            rules: {
                id: [
                    { required: true, message: '请输入物资编号', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '请输入设备名称', trigger: 'blur' }
                ],
                quantity: [
                    { required: true, message: '请输入数量', trigger: 'blur' }
                ],
                deviceCode: [
                    { required: true, message: '请输入设备编码', trigger: 'blur' }
                ]
            }
        };
    },
    watch: {
        visible(newVal) {
            this.dialogVisible = newVal;
            if (!newVal) {
                this.resetForm();
            }
        },
        dialogVisible(newVal) {
            this.$emit('update:visible', newVal);
        }
    },
    methods: {
        openDialog() {
            this.dialogVisible = true;
        },
        closeDialog() {
            this.dialogVisible = false;
        },
        resetForm() {
            this.$refs.form.resetFields();
        },
        async fetchInventory() {
            this.isFetching = true;
            try {
                // 模拟API调用，根据物资编号查询信息
                const response = {
                    id: this.form.id,
                    name: '设备示例',
                    quantity: 10,
                    deviceCode: '设备编码示例'
                };
                await new Promise(resolve => setTimeout(resolve, 1000)); // 模拟异步调用
                this.form = { ...response };
            } catch (error) {
                this.$message({
                    message: '获取物资信息失败',
                    type: 'error'
                });
            } finally {
                this.isFetching = false;
            }
        },
        onSubmit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    // 模拟API调用进行修改
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.$emit('refresh'); // 刷新库存数据
                    this.closeDialog();
                } else {
                    this.$message({
                        message: '请填写必填项',
                        type: 'warning'
                    });
                }
            });
        }
    }
};
</script>

<style scoped>
/* 样式 */
</style>